<script setup>
import {ref} from 'vue'
import store from "../../store";
import UNavbar from "../../uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import {onLoad, onPageScroll, onReachBottom} from "@dcloudio/uni-app";
import Loading from "../../components/loading/loading.vue";
import CoverBlur from "../../components/cover-blur/cover-blur.vue";
import EssayList from "../../components/essay-list/essay-list.vue";

const {imagePath} = store.common();
const isFirst = ref(true);//是否显示引导
const menuIndex = ref(0);//顶部菜单索引
const menuList = ref([
  {
    name: '最新文章'
  },
  {
    name: '原生小程序',
  },
  {
    name: 'UNIAPP',
  },
  {
    name: '实用工具'
  },
  {
    name: 'UNIAPP',
  },
  {
    name: '实用工具'
  },
  {
    name: 'UNIAPP',
  },
  {
    name: '实用工具'
  }
]);//菜单
const scrollTop = ref(0);//页面滚动高度
const loadingRef = ref(null);//加载动画
const coverBlurRef = ref(null);//全屏加载

onLoad(()=> {
 /* coverBlurRef.value.open();
  setTimeout(()=>{
    coverBlurRef.value.close();
  },2000)*/
})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});
onReachBottom(()=>{
  loadingRef.value.start();
})
</script>

<template>
  <cover-blur ref="coverBlurRef"></cover-blur>

  <view class="index">
    <!-- 本地没有存触发引导添加到我的小程序 -->
    <view class="first-notice" v-if="isFirst">
      点击“●●●”添加到我的小程序
    </view>
    <!-- 顶部图片 -->
    <image class="index-img" :src="imagePath('333','svg','index/')" mode="aspectFill"></image>
    <!-- 导航区域 -->
    <u-navbar placeholder left-icon="" :bg-color="scrollTop>6?'#fff':'transparent'" title="">
      <template v-slot:left>
        <view class="nav-bar">
          <image :src="imagePath('logo_t2')"></image>
        </view>
      </template>
    </u-navbar>
    <!-- / 分类菜单 -->
    <view class="null"></view>
    <view :class="{
      'scroll-active':scrollTop>6
    }" class="menu-scroll">
      <scroll-view class="menu-scroll-view" scroll-x>
        <view :class="{
          'menu-item-active':menuIndex === index
        }" class="menu-item"
              v-for="(menu,index) in menuList" :key="index" @click="menuIndex = index">
          {{ menu.name }}
        </view>
      </scroll-view>
    </view>

    <!-- / 轮播图 -->
    <view class="swiper">
      <swiper class="swiper-box" @change="change" autoplay :interval="2000"
              :duration="500">
        <swiper-item v-for="(item, index) in 2" :key="index" @tap="newPostTap(item)">
          <view class="swiper-item">
            <image :src="'https://cdn.frbkw.com/wp-center/uploads/2024/01/20240110212813590.jpg'" mode="widthFix"/>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- S 导航区域 -->
    <view class="nav">
      <view class="nav-list">
        <view v-for="(item,index) in 7" :key="index" class="item" @tap="xs_default(index)">
          <image :src="imagePath('dstrict-2','svg','index/')" mode="aspectFit"></image>
          <text> {{ '文章' }}</text>
        </view>
      </view>
      <!-- / 海报 -->
      <view class="poster">
        <image class="poster-img" :src="imagePath('poster','svg','index/')" mode="aspectFit"></image>
        <view class="poster-text">
          心念所至，生万千喜欢22
        </view>
        <button class="poster-btn" open-type="share">分享</button>
      </view>
    </view>
    <!-- E 导航区域 -->
    <!-- S 首页公告 -->
    <view class="notice">
      <image class="notice-icon" :src="imagePath('notice','svg','index/')" mode="aspectFill"></image>
      <view class="notice-text">
        <text>热水之人是的</text>
      </view>
    </view>
    <!-- E 首页公告 -->

    <!-- S 公众号文章 -->
    <view class="official-account">
      <view class="title" hover-class="li-hover">
        <image :src="imagePath('title-img','svg','index/')" mode="aspectFill"></image>
        <text>公众号文章</text>
      </view>

      <view class="swiper-list">
        <scroll-view class="" scroll-x="true" show-scrollbar="false">
          <view class="scroll-view-item-list" hover-class="li-hover"
                v-for="(wxlist,index) in 2" :key="index" @tap="scrlistTap(wxlist.hurl)">
            <view class="scroll-view-item-h-img">
              <image :src="'https://cdn.frbkw.com/wp-center/uploads/2022/03/1646562812-20200306.jpg'"
                     mode="widthFix"></image>
            </view>
            <view class="scroll-view-item-h-title">
              {{ 12378438 }}
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- E 公众号文章 -->

    <!-- 文章列表 -->
    <view class="essay">
      <view class="title">
        <view>
          <image :src="imagePath('title-img2','svg','index/')" mode="aspectFill"></image>
          <text>最新文章</text>
        </view>
        <text>查看更多</text>
      </view>
      <essay-list></essay-list>
    </view>
    <loading ref="loadingRef"></loading>
  </view>
</template>

<style scoped lang="scss">
.index {
  width: 100vw;
  @keyframes clickAnimation {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.1);
    }

    100% {
      transform: scale(1);
    }
  }
  @keyframes notice-text {
    0% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(-100%);
    }
  }

  .essay {
    width: 100%;
    display: flex;
    flex-direction: column;
    .essay-list{
      display: flex;
      flex-direction: column;
      row-gap: 30rpx;
      margin: 0 30rpx;
    }

    .title {
      margin: 28rpx 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      > text {
        color: #989898;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 20rpx;
      }

      > view {
        display: flex;
        align-items: center;

        image {
          width: 36rpx;
          height: 36rpx;
        }

        text {
          font-size: 30rpx;
          margin-left: 24rpx;
        }
      }
    }
  }

  .official-account {
    width: 100%;
    display: flex;
    flex-direction: column;

    .title {
      margin: 28rpx 30rpx;
      display: flex;
      align-items: center;

      image {
        width: 36rpx;
        height: 36rpx;
      }

      text {
        font-size: 30rpx;
        margin-left: 24rpx;
      }
    }

    .swiper-list {
      white-space: nowrap;
      width: 100%;

      .scroll-view-item-list {
        width: 420rpx;
        /* height: 240rpx; */
        border-radius: 20rpx;
        display: inline-block;
        overflow: hidden;
        background-color: #FFFFFF;
        margin-left: 30rpx;

        .scroll-view-item-h-title {
          font-size: 24rpx;
          margin: 18rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .scroll-view-item-h-img {
          width: 100%;
          height: 180rpx;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }
        }

        &:last-child {
          margin-right: 30rpx;
        }
      }
    }

  }

  .nav {
    background-color: #FFFFFF;
    border-radius: 20rpx;
    margin: 30rpx;

    .poster {
      display: flex;
      margin: 0 48rpx;
      border-top: #F5F5F5 1px solid;
      padding-top: 20rpx;
      padding-bottom: 14rpx;
      align-items: center;
      justify-content: space-between;

      .poster-img {
        height: 100rpx;
        width: 100rpx;
      }

      .poster-text {
        font-size: 24rpx;
        color: #807C7C;
      }

      .poster-btn {
        height: 50rpx;
        background-color: #007AFF;
        border-radius: 200rpx;
        font-size: 20rpx;
        width: 140rpx;
        color: #FFFFFF;
        flex-shrink: 0;
        margin-right: 0;
        margin-left: 0;
      }

    }

    .nav-list {
      width: 100%;
      display: grid;
      padding: 20rpx 0;
      grid-template-columns: repeat(4, 1fr);
      row-gap: 20rpx;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;

        image {

          height: 90rpx;
          width: 90rpx;
        }

        text {
          color: #807C7C;
          font-size: 24rpx;
        }

      }
    }
  }


  .notice {
    margin: 28rpx;
    padding: 26rpx 46rpx;
    border-radius: 40rpx;
    background-color: #fff4e0;
    display: flex;
    align-items: center;

    .notice-icon {
      width: 48rpx;
      height: 48rpx;
      flex-shrink: 0;
    }

    .notice-text {
      font-size: 30rpx;
      margin-left: 20rpx;
      width: 100%;
      height: 60rpx;
      overflow: hidden;
      position: relative;

      > text {
        position: absolute;
        width: 100%;
        height: 100%;
        line-height: 60rpx;
        text-align: right;
        animation: notice-text 10s linear infinite;
        white-space: nowrap;
        color: #fec009;
      }

    }
  }


  .swiper {
    margin: 0 30rpx 30rpx 30rpx;
    z-index: 30;

    .swiper-box {
      height: 320rpx;
      border-radius: 16rpx;
      overflow: hidden;
      /* 轮播图 */
      .swiper-item {
        border-radius: 16rpx;
        overflow: hidden;
        height: 320rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  /* .null{
     height: calc(var(--status-bar-height) + 44px);
   }*/

  .menu-scroll {
    display: flex;
    padding: 10rpx 30rpx 10rpx 30rpx;
    position: sticky;
    top: calc(var(--status-bar-height) + 44px + 30rpx);
    z-index: 99;

    &.scroll-active {
      border-radius: 0 0 30rpx 30rpx;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.10);
      background-color: #fff;
    }


    .menu-scroll-view {
      align-items: flex-end;
      white-space: nowrap;
      /* background-color: rgba(255, 255, 255, 0.4); */
      border-radius: 20rpx;
      padding: 20rpx 0;

      .menu-item {
        color: #6b6b6b;
        font-size: 26rpx;
        padding: 16rpx 30rpx;
        justify-content: center;
        align-items: center;
        filter: grayscale(1);
        flex-shrink: 0;
        width: auto;
        display: inline-block;
        margin-right: 20rpx;
        border-radius: 12rpx;

        &.menu-item-active {
          background-color: #213d86;
          filter: unset;
          color: #FFFFFF;
          animation: clickAnimation 1s ease forwards;
        }
      }
    }

  }

  .first-notice {
    background-color: #1f2021;
    position: fixed;
    top: 90rpx;
    right: 26%;
    width: 340rpx;
    padding: 16rpx;
    z-index: 99;
    border-radius: 200rpx;
    color: #faffff;
    text-align: center;
    font-size: 20rpx;
  }

  .nav-bar {
    image {
      height: 40rpx;
      width: 154rpx;
    }
  }

  /* 引导添加我的小程序 */
  .index-img {
    width: 100%;
    height: 500rpx;
    position: absolute;
    z-index: -1;
  }
}
</style>
